import React from 'react';
import { Form, Select, Card, Breadcrumb, Icon, Radio, Checkbox, Button, Switch } from 'antd';
import axios from '../../components/Engineering/axios'

const { Option, OptGroup } = Select;
const { Item: FormItem } = Form;


class SwitchFrom extends React.Component {
  state = {
  };

  componentDidMount() {
    setInterval(() => {
      this.setState({
        checked: !this.state.checked
      })
    }, 200)
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },

      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      }
    }
    return (
      <>
        <Card title="radio 单选框" style={{ marginTop: 10 }}>
          <Form layout="horizontal" labelAlign="left">

            <FormItem label="1.简单、不可用、大小">
              <Switch size="small" defaultChecked onChange={(value) => console.log(value)} style={{ marginRight: 20 }} />
              <Switch disabled checked={this.state.checked} onChange={(value) => console.log(value)} style={{ marginRight: 20 }} />
            </FormItem>


            <FormItem label="2.Radio 不可用">
              <Radio defaultChecked disabled>
                Disabled
              </Radio>
            </FormItem>

            <FormItem label="3.带有文字和图标">
              <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked style={{ marginRight: 20 }} />
              <Switch checkedChildren="1" unCheckedChildren="0" style={{ marginRight: 20 }} />
              <Switch
                style={{ marginRight: 20 }}
                checkedChildren={<Icon type="check" />}
                unCheckedChildren={<Icon type="close" />}
                defaultChecked
              />
            </FormItem>

            <FormItem label="4.标识开关操作仍在执行中">
              <Switch loading defaultChecked style={{ marginRight: 20 }} />
              <Switch size="small" loading style={{ marginRight: 20 }} />
            </FormItem>



          </Form>
        </Card>

      </>
    )

  }
}

export default Form.create({ name: 'SwitchFrom' })(SwitchFrom)




// 参数	                   说明	类型	默认值	版本
// autoFocus	            组件自动获取焦点	boolean	false	3.2.2
// checked	              指定当前是否选中	boolean	false	
// checkedChildren	      选中时的内容	string|ReactNode		
// defaultChecked	        初始是否选中	boolean	false	
// disabled	              是否禁用	boolean	false	3.2.2
// loading	              加载中的开关	boolean	false	
// size	                  开关大小，可选值：default small	string	default	
// unCheckedChildren	    非选中时的内容	string|ReactNode		
// onChange	              变化时回调函数	Function(checked: boolean, event: Event)		
// onClick	              点击时回调函数	Function(checked: boolean, event: Event)		3.13.0
// className	            Switch 器类名	string	-	3.10.1

// 方法#
// 名称	                  描述	版本
// blur()	                移除焦点	
// focus()	              获取焦点	
